<template>
  <view class="my-total">
    <view class="left">
      <radio :checked="isCheckAll" color="#c00000" @click="changeAll"></radio>
      全选
    </view>
    <view class="center">
      合计:
      <text class="txt">￥{{total_price}}</text>
    </view>
    <view class="right">
      <button class="btn">结算（{{ total }}）</button>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
  name: 'my_total',
  data() {
    return {};
  },
  computed: {
    ...mapGetters('cart', ['total', 'isCheckAll','total_price'])
  },
  methods: {
    ...mapMutations('cart', ['changeAllStatus']),
    // 全选反选
    changeAll() {
      this.changeAllStatus(!this.isCheckAll);
    }
  }
};
</script>

<style lang="scss">
.my-total {
  z-index: 99999;
  background-color: #fff;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  line-height: 40px;
  padding: 10px;
  .left {
    flex: 1;
  }

  .center {
    display: flex;
    align-items: center;
    .txt {
      color: #c00000;
      margin: 0px;
    }
  }

  .right {
    margin-left: 20px;
    flex: 1;
    .btn {
      height: 40px;
      background-color: #c00000;
      color: #fff;
      font-size: 14px;
      line-height: 40px;
    }
  }
}
</style>
